<script src="./script.js"></script>
<style src="./style.css"></style>
<template>
  <div class="app-container">

    <div class="filter-container">

      <el-select v-model="listQuery.type" class="filter-item" placeholder="类型" style="width:130px" @change="handleSearch">
        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-date-picker
        v-model="datetime"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        type="daterange"
        :picker-options="pickerOptions"
        :default-time="['00:00:00']"
        value-format="yyyy-MM-dd"
        class="filter-item"
        @change="handleSearch"
      />

      <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="pickItem">选择SKU</el-button>

      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>

    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      size="mini"
      :show-summary="statistics != null"
      :summary-method="getSummaries"
      style="width: 100%;"
    >
      <el-table-column label="ID" align="center" width="60">
        <template slot-scope="{row}">
          <el-link type="primary">{{ row.id }}</el-link>
        </template>
      </el-table-column>

      <el-table-column label="PID" align="center" width="60">
        <template slot-scope="{row}">
          <el-link type="primary">{{ row.pid }}</el-link>
        </template>
      </el-table-column>

      <el-table-column label="分类" align="center" width="90">
        <template slot-scope="{row}">
          <el-link type="primary">{{ row.parent_category }}</el-link>
          <div><el-link type="danger">{{ row.category }}</el-link></div>
        </template>
      </el-table-column>

      <el-table-column label="品名" width="120" prop="product_name" />
      <el-table-column label="规格" width="80" prop="product_item_name" />

      <el-table-column label="时间" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.happened_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}
        </template>
      </el-table-column>

      <el-table-column label="类型" align="center" width="60">
        <template slot-scope="{row}">
          <el-link type="primary" v-if="row.type == 'IN'">入库</el-link>
          <el-link type="danger" v-if="row.type == 'OUT'">出库</el-link>
        </template>
      </el-table-column>

      <el-table-column label="业务类型" align="center" width="70">
        <template slot-scope="{row}">
          <el-link v-if="row.trans_type == 'purchase'">采购</el-link>
          <el-link v-if="row.trans_type == 'surplus'">盘盈</el-link>
          <el-link v-if="row.trans_type == 'allocate'">调拨</el-link>
          <el-link v-if="row.trans_type == 'other'">其他</el-link>
          <el-link v-if="row.trans_type == 'init'">期初</el-link>
          <el-link v-if="row.trans_type == 'order_return'">取消订单</el-link>

          <el-link v-if="row.trans_type == 'sale'">销售</el-link>
          <el-link v-if="row.trans_type == 'return'">采购退货</el-link>
          <el-link v-if="row.trans_type == 'loss'">盘亏</el-link>
          <el-link v-if="row.trans_type == 'order_sale'">商城销售</el-link>
        </template>
      </el-table-column>

      <el-table-column label="出入单据" align="center" width="70">
        <template slot-scope="{row}">
          <el-link type="primary">{{ row.warehouse_order_id }}</el-link>
        </template>
      </el-table-column>

      <el-table-column label="订单" align="center" width="70">
        <template slot-scope="{row}">
          <el-link type="primary">{{ row.order_id }}</el-link>
        </template>
      </el-table-column>


      <el-table-column label="入库" align="center">
        <el-table-column label="单价" align="center">
          <template slot-scope="{row}" v-if="row.type == 'IN'">
            {{ row.price }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量">
          <template slot-scope="{row}" v-if="row.type == 'IN'">
            {{ row.quantity }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="金额">
          <template slot-scope="{row}" v-if="row.type == 'IN'">
            {{ row.subtotal }}
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="出库" align="center">
        <el-table-column label="单价" align="center">
          <template slot-scope="{row}" v-if="row.type == 'OUT'">
            {{ row.price }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量">
          <template slot-scope="{row}" v-if="row.type == 'OUT'">
            {{ row.quantity }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="金额">
          <template slot-scope="{row}" v-if="row.type == 'OUT'">
            {{ row.subtotal }}
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="结存" align="center">
        <el-table-column label="单价" align="center">
          <template slot-scope="{row}">
            {{ row.cost_price }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量">
          <template slot-scope="{row}">
            {{ row.stock }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="金额">
          <template slot-scope="{row}">
            {{ row.stock_amount }}
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="备注">
        <template slot-scope="{row}">
          {{ row.remark }}
        </template>
      </el-table-column>


    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <item-picker ref="item_picker" @onSelectConfirm="onSelectConfirm"></item-picker>

  </div>
</template>
